<template>
  <!-- 消息列表 -->
  <div class="notice-list-wrapper">
    <!-- 头部 -->
    <view class="top-wrapper">
      <view class="search-wrapper">
        <view class="search">
          <view class="ico-search">
            <image class="ico-search-img"
              src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-input-search.png" />
          </view>
          <input class="input" v-model="keyword" confirm-type="search" placeholder="请输入查询内容" @input="handleInput"
            @confirm="handleConfirm" />
        </view>
        <view class="clear" @click="clearAllReadFlag">
          <image class="ico-clear" src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-clear.png" />
        </view>
      </view>
    </view>

    <!-- 列表 -->
    <scroll-view class="list-wrapper" scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefreshing"
      @refresherrefresh="refresh" @scrolltolower="loadMore" v-if="listData.length > 0">
      <view class="list-item" v-for="(item, index) in listData" :key="index" @click="toDetail(item, index)">
        <view class="left">
          <!-- 已读标识 -->
          <view class="read-flag" />
          <!-- 标题 -->
          <view class="title">交易类型:消息类型</view>
          <!-- 其他消息 -->
          <view class="illustrate">
            交易时间：2024-02-02 12:00:00
          </view>
          <view class="illustrate">
            交易金额：343.4元
          </view>
          <view class="illustrate">
            交易状态：交易成功
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 没有数据 -->
    <view class="no-data-wrapper" v-else>
      <image class="no-data-img" src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/no-data.png" />
      <view class="no-data-txt">暂无数据</view>
    </view>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
import moment from "moment";

let keyword = ref(null);

let listData = ref([
  {
    label: "账号登录",
    value: 0,
  },
  {
    label: "验证码登录",
    value: 1,
  },
]);

onShow(() => {

});


// 输入框输入
function handleInput(ev) {
  if (ev.detail.value === "") {
  }
}

// 输入框筛选
function handleConfirm(ev) {
  keyword.value = ev.detail.value;

}

// 清除当前已读状态
function clearCurReadFlag(item, index) {
  // const { isRead, id } = item;
  // return new Promise((resolve) => {
  //   if (isRead === 0) {
  //     modifyReadFlag(id).then(() => {
  //       listData.value[index].isRead = 1;
  //       resolve("");
  //     });
  //   } else {
  //     resolve("");
  //   }
  // });
}

// 一键已读
function clearAllReadFlag() {
  // modifyAllReadFlag(userId).then(() => {
  //   listData.value.forEach((item) => {
  //     item.isRead = 1;
  //   });
  // });
}
// 跳转到详情
let toDetail = () => {
  uni.navigateTo({
    url: "/pagesDetail/transactionDetail/index",
  });
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
